<!DOCTYPE html>
<!-- saved from url=(0055)http://192.168.113.111:8888/mine/chat.html?receiverId=2 -->
<html lang="en" style="font-size: 52.0833px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>私信</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <link rel="stylesheet" type="text/css" href="/chat/chat.css">
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>

    <script>
        $(function(){
            receiverId = getParams().id;//接收者
            senderId = user.id;//发送者
            if (receiverId && senderId) {
                console.log(receiverId);
                console.log(senderId);
                console.log("发送者和接收者都存在");
                //资料  跳转用户(接收者)信息
                $(".receiverData").click(function(){
                    location.href="/userProfiles.html?id="+receiverId;
                });

                //顶边框用户名字回显
                $.get(baseUrl+"/users/"+receiverId,function(data){
                    $(".receiverName span").renderValues(data);
                });

                //私信消息回显
                function getMessage(){
                    $.get(baseUrl+"/privateMessages",{senderId:senderId,receiverId:receiverId},function(data){
                        $(".message").html("");
                        var arr = '';
                        $.each(data,function(index,ele){
                            if (ele.sender.id == senderId) {
                                arr+='<div class="show"><div class="time">'+ele.sendTime+'</div><div class="msg"><img src="'+ele.sender.headImgUrl+'" width="40px"><p><i class="msg_input"></i>'+ele.content+'</p></div></div>';
                            }else {
                                arr+='<div class="send"><div class="time">'+ele.sendTime+'</div><div class="msg"><img src="'+ele.sender.headImgUrl+'" width="40px"><p><i class="msg_input"></i>'+ele.content+'</p></div></div>';
                            }
                            $(".message").html(arr);
                        });
                    });
                    //查看私信 更改状态
                    var json = {
                        "sender.id":receiverId,//私信发送者
                        "receiver.id":senderId,//私信接收者(当前用户)
                        state:1//已读
                    };
                    $.ajax({
                        url:baseUrl+"/privateMessages",
                        data:json,
                        type:"put"
                    });
                }
                getMessage();
                //定时器重复执行,让数据及时更新
                window.setInterval(function(){
                    getMessage();
                },3000);
                //发送私信
                $("[name = 'message']").change(function(){
                    if ($(this).val().length > 0) {
                        $("#sendBtn").click(function(){
                            var content = $("[name = 'message']").val();
                            var json = {
                                "sender.id":senderId,//私信发送者
                                "receiver.id":receiverId,//私信接收者
                                content:content,//私信内容
                                state:0
                            };
                            $("[name = 'message']").val("");
                            $.ajax({
                                url:baseUrl+"/privateMessages",
                                data:json,
                                type:"post",
                                success: function (data) {
                                    getMessage();
                                }
                            })
                        });
                    }
                });
                //
            }
            //
        })
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col-8 tit receiverName">
            <span render-html="nickName">hui</span>
        </div>
        <div class="col-2 right receiverData"><a href="#">资料</a></div>
    </div>
</div>

<div class="message">
    <!--<div class="show">
        <div class="time">2018-11-14 03:55</div>
        <div class="msg">
            <img src="/upload/7e854d1d-a7be-4360-8943-8771d18ee0e3.jpg" width="40px" alt="">
            <p><i class="msg_input"></i>你好啊</p>
        </div>
    </div>
    <div class="send">
        <div class="time">2018-11-14 04:56</div>
        <div class="msg">
            <img src="/upload/23a45130-e59c-4844-bc52-67aed3d57fc1.jpeg" width="40px" alt="">
            <p><i class="msg_input"></i>你好!!!</p>
        </div>
    </div>-->
</div>
<div class="footer">
    <img src="/img/xiaolian.png">
    <input type="text" name="message">
    <p id="sendBtn">发送</p>
    <!--<p id="sendBtn">发送</p>-->
</div>


</body>
</html>